<template>

  <div class="container">

    <el-row :gutter="20">

      <!--用户数据-->
      <el-col :span="20" :xs="24">


    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5" class="button">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="medium"
          @click="handleAdd"
          v-hasPermi="['Empment:information:add_one']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5" class="button">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="medium"
          @click="handleImport"
          v-hasPermi="['Empment:information:import']"
        >导入</el-button>
      </el-col>
    </el-row>


      </el-col>
    </el-row>
    <!-- 添加或修改员工信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="员工名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入员工名称" />
        </el-form-item>
        <el-form-item label="工号" prop="empNumber">
          <el-input v-model="form.empNumber" placeholder="请输入工号" />
        </el-form-item>
        <el-form-item label="归属部门" prop="deptId">
          <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
        </el-form-item>
        <el-form-item label="用户性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择用户性别">
            <el-option
              v-for="dict in dict.type.sys_user_sex"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位">
              <el-select v-model="form.postIds" multiple placeholder="请选择岗位">
                <el-option
                  v-for="item in postOptions"
                  :key="item.postId"
                  :label="item.postName"
                  :value="item.postId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色">
              <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="身份证" prop="idCard">
          <el-input v-model="form.idCard" placeholder="请输入身份证" />
        </el-form-item>
        <el-form-item label="身份证号地域" prop="idNumberRegion">
          <el-input v-model="form.idNumberRegion" placeholder="请输入身份证号地域" />
        </el-form-item>
        <el-form-item label="手机号码" prop="phoneNumber">
          <el-input v-model="form.phoneNumber" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="地域" prop="region">
          <el-select v-model="form.region" placeholder="请输入地域">
            <el-option
              v-for="dict in dict.type.region"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同签订时间" prop="contractDate">
          <el-date-picker clearable
            v-model="form.contractDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择合同签订时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同截至日期" prop="contractLong">
          <el-date-picker clearable
            v-model="form.contractLong"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择合同截至日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="入职时间" prop="date">
          <el-date-picker clearable
            v-model="form.date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择入职时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="社保缴纳情况" prop="typeOfEmployment">
          <el-input v-model="form.typeOfEmployment" placeholder="请输入社保缴纳情况"/>
        </el-form-item>
        <el-form-item label="用工类型" prop="typeOfMen">
          <el-select v-model="form.typeOfMen" placeholder="请选择人员类型">
            <el-option
              v-for="dict in dict.type.type_of_men"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="婚姻状态" prop="maritalStatus">
          <el-select v-model="form.maritalStatus" placeholder="请选择婚姻状态">
            <el-option
              v-for="dict in dict.type.marital_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="政治面貌" prop="politicalLandscape">
          <el-input v-model="form.politicalLandscape" placeholder="请输入政治面貌" />
        </el-form-item>
        <el-form-item label="住址" prop="address">
          <el-input v-model="form.address" placeholder="请输入住址" />
        </el-form-item>

        <el-form-item label="最高学历" prop="highEducationalLevel">
          <el-select v-model="form.highEducationalLevel" placeholder="请输入最高学历">
            <el-option
              v-for="dict in dict.type.education"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="毕业学校" prop="school">
          <el-input v-model="form.school" placeholder="请输入毕业学校" />
        </el-form-item>
        <el-form-item label="学制类型" prop="typeEducation">
          <el-input v-model="form.typeEducation" placeholder="请输入学制类型" />
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input v-model="form.major" placeholder="请输入专业" />
        </el-form-item>
        <el-form-item label="民族" prop="nation">
          <el-input v-model="form.nation" placeholder="请输入民族" />
        </el-form-item>
        <el-form-item label="紧急联系人" prop="emergencyContact">
          <el-input v-model="form.emergencyContact" placeholder="请输入紧急联系人" />
        </el-form-item>
        <el-form-item label="紧急联系人电话" prop="emergencyContactPhone">
          <el-input v-model="form.emergencyContactPhone" placeholder="请输入紧急联系人电话" />
        </el-form-item>
<!--        <el-form-item label="第一学历" prop="firstDegree">-->
<!--          <el-input v-model="form.firstDegree" placeholder="请输入第一学历" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="第二学历" prop="secondDegree">-->
<!--          <el-input v-model="form.secondDegree" placeholder="请输入第二学历" />-->
<!--        </el-form-item>-->

        <el-form-item label="开户行" prop="bank">
          <el-input v-model="form.bank" placeholder="请输入开户行" />
        </el-form-item>
        <el-form-item label="银行账号" prop="bankAccountNumber">
          <el-input v-model="form.bankAccountNumber" placeholder="请输入银行账号" />
        </el-form-item>
        <el-form-item label="爱好特长" prop="hobby">
          <el-input v-model="form.hobby" placeholder="请输入爱好特长" />
        </el-form-item>
        <el-form-item label="是否安排寝室" prop="dormitoryNeed">
          <el-input v-model="form.dormitoryNeed" placeholder="请输入是否安排寝室" />
        </el-form-item>
        <el-form-item label="寝室号" prop="dormitory">
          <el-input v-model="form.dormitory" placeholder="请输入寝室号" />
        </el-form-item>
        <el-form-item label="出生年月" prop="birthday">
          <el-date-picker clearable
            v-model="form.birthday"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择出生年月">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="其他" prop="other">
          <el-input v-model="form.other" placeholder="请输入其他" />
        </el-form-item>
        <el-form-item label="预留字段1" prop="Reserved1">
          <el-input v-model="form.Reserved1" placeholder="请输入预留字段1" />
        </el-form-item>
        <el-form-item label="预留字段2" prop="Reserved2">
          <el-input v-model="form.Reserved2" placeholder="请输入预留字段2" />
        </el-form-item>
        <el-form-item label="预留字段3" prop="Reserved3">
          <el-input v-model="form.Reserved3" placeholder="请输入预留字段3" />
        </el-form-item>
        <el-form-item label="预留字段4" prop="Reserved4">
          <el-input v-model="form.Reserved4" placeholder="请输入预留字段4" />
        </el-form-item>
        <el-form-item label="预留字段5" prop="Reserved5">
          <el-input v-model="form.Reserved5" placeholder="请输入预留字段5" />
        </el-form-item>
        <el-form-item label="预留字段6" prop="Reserved6">
          <el-input v-model="form.Reserved6" placeholder="请输入预留字段6" />
        </el-form-item>
        <el-form-item label="预留字段7" prop="Reserved7">
          <el-input v-model="form.Reserved7" placeholder="请输入预留字段7" />
        </el-form-item>
        <el-form-item label="预留字段8" prop="Reserved8">
          <el-input v-model="form.Reserved8" placeholder="请输入预留字段8" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url "
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>部门编号为系统中的部门id</span><br>
          <span>员工的姓名与身份证号必须填写</span><br>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {  addInformation } from "@/api/Empment/information";
import {deptTreeSelect, getUser} from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getToken } from "@/utils/auth";


export default {
  name: "add",
  dicts: ['marital_status', 'type_of_employment', 'type_of_men', 'sys_user_sex','region','education'],
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 部门名称
      deptName: undefined,
      // 部门树选项
      deptOptions: undefined,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 员工信息表格数据
      informationList: [],
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // // 是否更新已经存在的用户数据
        // updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/Empment/information/importData"
      },


      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        name: null,
        deptId: null,
        empNumber: null,
        sex: null,
        idCard: null,
        idNumberRegion: null,
        phoneNumber: null,
        region: null,
        contractDate: null,
        contractLong: null,
        date: null,
        typeOfEmployment: null,
        typeOfMen: null,
        maritalStatus: null,
        politicalLandscape: null,
        address: null,
        highEducationalLevel: null,
        school: null,
        major: null,
        nation: null,
        emergencyContact: null,
        emergencyContactPhone: null,
        firstDegree: null,
        secondDegree: null,
        typeEducation: null,
        bank: null,
        bankAccountNumber: null,
        hobby: null,
        dormitoryNeed: null,
        dormitory: null,
        birthday: null,
        other: null,
        Reserved1: null,
        Reserved2: null,
        Reserved3: null,
        Reserved4: null,
        Reserved5: null,
        Reserved6: null,
        Reserved7: null,
        Reserved8: null
      },
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        date: [
          { required: true, message: "入职时间不能为空", trigger: "blur" }
        ],
        idCard: [
          { required: true, message: "身份证号不能为空", trigger: "blur" },
          { min: 18, max: 18, message: '身份证号长度必须为18', trigger: 'blur' }
        ],
        phonenumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      }
    };
  },//todo 导入部分的返回值因为太长了会无法查看，需要解决
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },

  created() {
    this.getList();
    this.getDeptTree();
  },
  methods: {

    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        userId: null,
        name: null,
        empNumber: null,
        sex: null,
        idCard: null,
        idNumberRegion: null,
        phoneNumber: null,
        region: null,
        contractDate: null,
        contractLong: null,
        date: null,
        typeOfEmployment: null,
        typeOfMen: null,
        maritalStatus: null,
        politicalLandscape: null,
        address: null,
        highEducationalLevel: null,
        school: null,
        major: null,
        nation: null,
        emergencyContact: null,
        emergencyContactPhone: null,
        firstDegree: null,
        secondDegree: null,
        typeEducation: null,
        bank: null,
        bankAccountNumber: null,
        hobby: null,
        dormitoryNeed: null,
        dormitory: null,
        birthday: null,
        other: null,
        Reserved1: null,
        Reserved2: null,
        Reserved3: null,
        Reserved4: null,
        Reserved5: null,
        Reserved6: null,
        Reserved7: null,
        Reserved8: null,
        postIds: [],
        roleIds: []
      };
      this.resetForm("form");
    },



    /** 新增按钮操作 */

    handleAdd() {
      this.reset();
      getUser().then(response => {
      this.postOptions = response.posts;
      this.roleOptions = response.roles;
      this.open = true;
      this.title = "添加员工信息";
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateInformation(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addInformation(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },



    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('/Empment/information/importTemplate', {
      }, `user_template_${new Date().getTime()}.xlsx`)
    },

// 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
// 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
// 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    }

//todo 需要更改学历字段
  }
};
</script>


<div class="container">
<button>按钮 1</button>
<button>按钮 2</button>
</div>

<style>
html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: row;      /* 确保按钮水平排列 */
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
  height: 100vh;            /* 高度为视口高度 */
}
.button {
  margin: 10px 10px;
}
</style>
